<template>
    <div class="placeOrder-back">
        <yw-header></yw-header>
        <div class="placeOrder">
            <div class="top-title">
                <h2>下单信息</h2>
                <div class="steps">
                    <div data-v-3f518342="" class="ivu-steps ivu-steps-horizontal">
                        <div data-v-3f518342="" class="ivu-steps-item ivu-steps-status-process" style="width: 25%;">
                            <div class="ivu-steps-tail"><i></i></div> 
                            <div class="ivu-steps-head">
                                <div class="ivu-steps-head-inner"><span>1</span></div>
                            </div>
                            <div class="ivu-steps-main">
                                <div class="ivu-steps-title"></div> 
                                <div class="ivu-steps-content">下单</div>
                            </div>
                        </div> 
                        <div data-v-3f518342="" class="ivu-steps-item ivu-steps-status-wait" style="width: 25%;">
                            <div class="ivu-steps-tail"><i></i></div> 
                            <div class="ivu-steps-head">
                                <div class="ivu-steps-head-inner"><span>2</span></div>
                            </div> 
                            <div class="ivu-steps-main">
                                <div class="ivu-steps-title"></div> 
                                <div class="ivu-steps-content">订单支付</div>
                            </div>
                        </div> 
                        <div data-v-3f518342="" class="ivu-steps-item ivu-steps-status-wait" style="width: 25%;">
                            <div class="ivu-steps-tail"><i></i></div> 
                            <div class="ivu-steps-head">
                                <div class="ivu-steps-head-inner"><span>3</span></div>
                            </div> 
                            <div class="ivu-steps-main">
                                <div class="ivu-steps-title"></div> 
                                <div class="ivu-steps-content">陪玩接单</div>
                            </div>
                        </div> 
                        <div data-v-3f518342="" class="ivu-steps-item ivu-steps-status-wait" style="width: 25%;">
                            <div class="ivu-steps-tail"><i></i></div>
                            <div class="ivu-steps-head">
                                <div class="ivu-steps-head-inner"><span>4</span></div>
                            </div> 
                            <div class="ivu-steps-main">
                                <div class="ivu-steps-title"></div> 
                                <div class="ivu-steps-content">评价陪玩师</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="steps">
                    <Steps :current="current">
                        <Step title="" content="下单"></Step>
                        <Step title="" content="订单支付"></Step>
                        <Step title="" content="陪玩接单"></Step>
                        <Step title="" content="评价陪玩师"></Step>
                    </Steps>
                </div> -->
                <div class="myClear"></div>
            </div>
            <!-- 陪玩信息 -->
            <div class="step1">
                <div class="userinfo info-mar">
                    <p>陪玩师：</p>
                    <div class="info">
                        <img :src="$imgPath(headImg)" alt="">
                        <div>
                            <p class="info-p1">{{name}}</p>
                            <p class="info-p2">{{division}}</p>
                        </div>
                    </div>
                </div>
                <div class="userinfo info-mar">
                    <p>服务：</p>
                    <div class="info">
                        <img :src="$imgPath(serverLogo)" alt="">
                        <div>                        
                            <p class="info-p service-p">{{serverName}}</p>                   
                        </div>
                    </div>
                </div>
                <div class="userinfo info3">
                    <p>单价：</p>
                    <div class="info">
                        <img src="../../assets/img/detail/price.png" alt="">
                        <div>
                            <p class="info-p">
                                <span>￥</span><span>{{price}}</span><span>/小时</span>      
                            </p>                                         
                        </div>
                    </div>
                </div>
                <div class="myClear"></div>
            </div>
            <!-- 下单时间 -->
            <div class="step2">                        
                <span>下单时间：</span>
                <span>日期：</span>
                <DatePicker class="orderDate" v-model="orderDate" type="date" :options="options3" style="width: 200px;height:38px;"></DatePicker>
                <span>时间：</span>
                <input type="text" class="orderTime" v-model="timeOrder" @click="timesIsShow=!timesIsShow" readonly>
                <div class="times" v-if="timesIsShow">
                    <!-- <ul v-if="orderDateIs">
                        <li v-for="(item,index) in timeArr" :class="{'activeNone':newHours > index,'active':selectTime == item}" :key="index" @click="timeXz(item)">{{item}}</li>    
                    </ul> -->
                    <ul>
                        <li  v-for="(item,index) in timeArr" :class="{'active':selectTime == item.time && !timeJudge(index,item),'activeNone':timeJudge(index,item) || item.isSelect==false}" :key="index" @click="timeXz(index,item)">{{item.time}}</li>                         
                    </ul>
                </div>
                <em>
                    <button class="num-btn" @click="jian()">-</button><input type="text" v-model="serviceTime" class="orderCount" readonly><button class="num-btn jia" @click="jia()">+</button>
                </em>
            </div>
            <!-- 留言-->
            <div class="step3">
                <div class="content1">
                    <p>留言：</p>
                    <div class="content">
                        <textarea v-model="remark" @input="checkContent()" maxlength="200" cols="178" rows="10" placeholder="给你的陪玩师说点什么吧……"></textarea>
                        <span>{{count}}/200</span>               
                    </div>
                    <div class="myClear"></div>
                </div>
            <div class="content2">
                    <em></em><span class="label-span label-span1">手机：</span><input type="text" v-model="detailObj.phone" class="">
                    <span class="label-span QQ-span">QQ：</span><input type="text" class="" v-model="detailObj.qq">
                    <span class="label-span">（必填）</span>
                    <!-- <span class="label-span wx-span">微信：</span><input type="text" class="" v-model="wx"> -->
                </div>
            </div>
            <!-- 优惠券抵用 -->
            <div class="step4" v-if="coupons.length > 0">
                <p>优惠券抵用：</p>
                <ul class="coupons">
                    <li v-for="(item,index) in coupons" :key="index">
                        <div class="coupon-left">
                            <p>{{item.coupon.price}}元</p>
                            <p>{{item.coupon.title}}</p>
                            <p>{{$time1(item.createTime)}}至{{$time1(item.limitTime)}}</p>
                        </div>
                        <div class="coupon-right">
                            <p>{{item.coupon.descript}}</p>        				
                        </div>
                    </li>
                </ul>
                <div class="myClear"></div>
            </div>
            <!--支付方式 -->
            <div class="step5">          
                <div class="way1">
                    <p>支付方式:</p>
                    <div class="ways">
                        <span class="ways-one" :class="[zhifuType == 0 ? 'active' : '']" @click="zfType(0)">
                            <img src="../../assets/img/pay/Pay-zfb.png">
                        </span>
                        <span class="ways-tow" :class="[zhifuType == 1 ? 'active' : '']" @click="zfType(1)">
                            <img src="../../assets/img/pay/Pay-wx.png">
                        </span>
                        <div class="myClear"></div>
                        <div class="yue">
                            <img v-if="isYe" src="../../assets/img/pay/radiao-icon.png" alt="" @click="isYe = !isYe">
                            <img v-else src="../../assets/img/Request-Service/ServicesAvailable-radio.png" width="22" alt="" @click="isYe = !isYe">
                            <span>使用余额</span><span>（账户当前余额：{{moneyObj.recharge}}元）</span>
                            <router-link tag="span" :to="{name:'topUp',query:{tabIndex:'1'}}">充值</router-link>
                        </div>
                    </div>
                    <div class="myClear"></div>                                
                </div>            
                <div class="way2">
                    <div class="way2-money">
                        <span class="way2-money-label">费用合计：</span><span class="way2-money-num">￥{{totalPrice1}}</span>
                    </div>
                    <div class="way2-money" v-if="coupons.length > 0">
                        <span class="way2-money-label">优惠券抵扣：</span><span class="way2-money-num">-￥{{coupons[0].coupon.price}}</span>
                    </div>
                    <div class="way2-money" v-if="isYe">
                        <span class="way2-money-label">余额抵扣：</span><span class="way2-money-num">-￥{{yueDk}}</span>
                    </div>
                    <div class="way2-money" id="shifu">
                        <span class="way2-money-label">实付金额：</span><span class="way2-money-num">￥{{totalPrice}}</span>
                    </div>
                    <div class="zf-btn">
                        <p @click="servicePay()">确认支付</p>
                        <div class="myClear"></div> 
                    </div>
                    <p>温馨提示：待付款订单有10分钟付款时间，逾期将自动取消订单</p>
                </div>
            </div>
            <Modal
                v-model="ewmBox"
                :closable="false" :footer-hide="true" width="210" class-name="vertical-center-modal">
                <canvas ref="canvas"></canvas>
            </Modal>
        </div>
         <yw-footer></yw-footer>
    </div>
</template>
<script>
import apiHttp from '../../api/index'
import header from '../common/header'
import footer from '../common/footer'
import QRCode from 'qrcode'
export default {
    data(){
        return{
            //isSelect:true,
            options3: {             // 日期
                disabledDate (date) {
                    return date && date.valueOf() < Date.now() - 86400000;
                }
            },
            timeArr:[
                {time:'00:00'},{time:'00:30'},{time:'01:00'},{time:'01:30'},{time:'02:00'},{time:'02:30'},{time:'03:00'},{time:'03:30'},{time:'04:00'},{time:'04:30'},{time:'05:00'}, {time:'05:30'}, {time:'06:00'}, {time:'06:30'},
                {time:'07:00'},{time:'07:30'},{time:'08:00'},{time:'08:30'},{time:'09:00'},{time:'09:30'},{time:'10:00'},{time:'10:30'},{time:'11:00'},{time:'11:30'},{time:'12:00'}, {time:'12:30'}, {time:'13:00'}, {time:'13:30'}, 
                {time:'14:00'},{time:'14:30'},{time:'15:00'},{time:'15:30'},{time:'16:00'},{time:'16:30'},{time:'17:00'},{time:'17:30'},{time:'18:00'},{time:'18:30'},{time:'19:00'}, {time:'19:30'}, {time:'20:00'}, {time:'20:30'}, 
                {time:'21:00'},{time:'21:30'},{time:'22:00'},{time:'22:30'},{time:'23:00'},{time:'23:30'}],
            orderDate: new Date(),              // 当前日期
            timesIsShow:false,                  // 显示时间
            detailObj:{},                       // 个人信息
            zhifuType:-1,                        // 支付选择
            name:this.$route.query.name,        // 服务人员的姓名
            serverAuthId:this.$route.query.serverAuthId,        // 游戏id
            serverName:this.$route.query.serverName,        // 服务的游戏
            division:this.$route.query.division,        // 服务段位
            price:this.$route.query.price,        // 服务段位价格
            serviceTime:Number(this.$route.query.serviceTime),        // 服务时间  
            headImg:this.$route.query.headImg,        // 陪玩师头像
            serverLogo:this.$route.query.serverLogo,        // 陪玩师头像
            userId:this.$route.query.userId,        // 陪玩师头像
            timeOrder:'',                        // 选择的时间
            remark:'',                              //留言内容
            count:0,                                //留言字符数统计
            newHours:'',                          // 当前小时
            selectTime:'',                        // 当前时间
            moneyObj:{},                            // 钱包详情
            coupons:[],                             // 优惠券列表
            isYe:true,                              // 是否选中余额
            formZFB:'',                             // 支付宝返回的表单
            ewmBox:false,       // 微信支付二维码弹框
            returnUrl:`http://${location.host}/`,   // 当前页面的地址
            yueTotal:0,                                // 余额抵扣计算
            makeTimeVal:false,                         // 开始预约时间
            wxZfSuccess:'',                             // 微信支付循环
            orderDateIs:true,                          // 日期时间的判断：是否是当天日期
            //yuyueTime:[],                                //获取预约时间
            yuyueArr:[],                                //转换以后的预约时间数组
            isJia:true                                  //是否允许加时间
           
        }
    },
    components:{
        'yw-header':header,
        'yw-footer':footer,
    },
    computed:{
        totalPrice1(){
            this.yueTotal = parseFloat((this.serviceTime*this.price).toFixed(10))
            return parseFloat((this.serviceTime*this.price).toFixed(10))
        },
        totalPrice(){
            let p = 0
            if(this.coupons.length > 0){
                p = this.coupons[0].coupon.price
            }
            let m = (this.serviceTime*this.price).toFixed(10) - p - this.moneyObj.recharge
            if(this.isYe){
                if(m > 0){
                    return parseFloat(m.toFixed(10))
                }else {
                    return 0
                }
            }else{
                this.yueTotal = parseFloat((this.serviceTime*this.price).toFixed(10))
                return parseFloat((this.serviceTime*this.price).toFixed(10) - p)
            }
        },
        yueDk(){
            if(this.yueTotal <= this.moneyObj.recharge){
                if(this.coupons.length > 0){
                    return this.yueTotal - this.coupons[0].coupon.price
                }else{
                    return this.yueTotal
                }
            }else {
                return this.moneyObj.recharge
            }
        }
    },
    mounted(){        
        this.screening()      
        this.getUserWalletDetail()
        this.couponsList()
        this.makeTime() 
        //this.time()           
    },
    watch:{
        // 查询优惠券
        serviceTime(newVal,oldVal){
            this.couponsList()
        },
        //日期发生变化
        orderDate(newVal,oldVal){
            this.serviceTime = 1
            this.timeOrder = ''             
            let oDate1 = new Date(newVal)
            let oDate2 = new Date(oldVal);           
            //判断日期是否是当天日期：（不是当天日期就是预约时间）
            if(oDate1.getTime() > oDate2.getTime()){
                //是预约日期
                this.orderDateIs = false
            } else {
                //不是预约日期
                this.orderDateIs = true
            }
            this.time();
        }
    },
    methods:{         
        //时间置灰的条件
        timeJudge(index,item){ 
            let myDate = new Date();
            let myDay = myDate.getDate();                       
            if(this.orderDateIs){
                //是当天日期
                if( this.yuyueArr.length>0){
                    for(var i=0;i<this.yuyueArr.length;i++){
                        if(this.yuyueArr[i].day==myDay){ 
                            if(item.time>=this.yuyueArr[i].start && item.time<=this.yuyueArr[i].end){                                                   
                                return true                            
                            }                                                      
                        }                                              
                    } 
                }
                if(this.newHours > index ){                                              
                    return true
                }                                              
            }else{              
               //是预约日期                              
                if( this.yuyueArr.length>0){                    
                    for(var i=0;i<this.yuyueArr.length;i++){                                             
                        if(this.yuyueArr[i].day>myDay){ 
                             if(item.time>=this.yuyueArr[i].start && item.time<=this.yuyueArr[i].end){                                                                               
                                return true                            
                            }                                                     
                        }                                                                  
                    } 
                }else{
                    return false 
                }                                
            }
            
        },
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.detailObj = resp
            })
        },
        // 钱包详情
        getUserWalletDetail(){
            apiHttp.apiCenter.getUserWalletDetail('',resp=>{
                if(resp.code == 200){
                    this.moneyObj = resp.data
                }
            })
        },
        // 时间计算
        time(){          
            let myDate = new Date();           
            let myDay = myDate.getDate();           
            if(myDate.getMinutes() >30){ 
               let myHours = `${myDate.getHours()+1}`;                             
               let time1 = '00'
               if(this.orderDateIs){
                   //是当天
                   if( this.yuyueArr.length>0){                   
                        for(var i=0;i<this.yuyueArr.length;i++){ 
                            if(this.yuyueArr[i].day==myDay){                                
                                let start = this.yuyueArr[i].start.slice(0,2);
                                let end = this.yuyueArr[i].end.slice(0,2);
                                let startMui = this.yuyueArr[i].start.slice(3,5);                                             
                                if( Number(myHours)==Number(start) && Number(time1)-Number(startMui)==0 ){ 
                                    //时间不足1小时                           
                                    if(startMui=="00"){
                                        this.selectTime = `${Number(end)}:30`;                         
                                        this.timeOrder = `${Number(end)}:30 - ${Number(end)+this.serviceTime}:30`
                                    }else{
                                        this.selectTime = `${Number(end)+1}:00`;                         
                                        this.timeOrder = `${Number(end)+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                    }                            
                                    this.newHours = (myDate.getHours() + 1) * 2                          
                                    break;
                                }else if(Number(myHours)>=Number(start) && Number(myHours)<=Number(end)){
                                    //当前时间在预约时间段内                           
                                    if(startMui=="00"){
                                        this.selectTime = `${Number(end)}:30`;                         
                                        this.timeOrder = `${Number(end)}:30 - ${Number(end)+this.serviceTime}:30`
                                    }else{
                                        this.selectTime = `${Number(end)+1}:00`;                         
                                        this.timeOrder = `${Number(end)+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                    }                            
                                    this.newHours = (myDate.getHours() + 1) * 2                          
                                    break;
                                }else{                          
                                    this.selectTime = `${myDate.getHours()+1}:00`;                          
                                    let endTime = myDate.getHours() + 1 + this.serviceTime;
                                    if(endTime>24){
                                        endTime = endTime - 24
                                    }else if(endTime == 24){
                                            endTime = 0 
                                    } 

                                    if(myDate.getHours() + 1 == 24){
                                            this.newHours = 0
                                    }else{
                                            this.newHours = (myDate.getHours() + 1) * 2
                                    } 
                                    this.timeOrder = `${(myDate.getHours())+1}:00 - ${endTime}:00`                                                                           
                                }
                              
                            }                                                              
                        } 
                    }else{                  
                        this.selectTime = `${myDate.getHours()+1}:00`;
                        let endTime = myDate.getHours() + 1 + this.serviceTime ;
                        if(endTime>24){
                            endTime = endTime - 24
                        }else if(endTime == 24){
                                endTime = 0 
                        } 

                        if(myDate.getHours() + 1 == 24){
                                this.newHours = 0
                        }else{
                                this.newHours = (myDate.getHours() + 1) * 2
                        } 
                        this.timeOrder = `${(myDate.getHours())+1}:00 - ${endTime}:00`                    
                    }                     
                            
                }else{
                    //不是当天
                    if( this.yuyueArr.length>0){   
                        for(var i=0;i<this.yuyueArr.length;i++){ 
                            if(this.yuyueArr[i].day>myDay){                                 
                                let start = this.yuyueArr[i].start.slice(0,2);
                                let end = this.yuyueArr[i].end.slice(0,2);
                                let startMui = this.yuyueArr[i].start.slice(3,5);                                             
                                if( Number(myHours)==Number(start) && Number(time1)-Number(startMui)==0 ){ 
                                    //时间不足1小时                           
                                    if(startMui=="00"){
                                        this.selectTime = `${Number(end)}:30`;                         
                                        this.timeOrder = `${Number(end)}:30 - ${Number(end)+this.serviceTime}:30`
                                    }else{
                                        this.selectTime = `${Number(end)+1}:00`;                         
                                        this.timeOrder = `${Number(end)+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                    }                            
                                    this.newHours = (myDate.getHours() + 1) * 2                          
                                    break;
                                }else if(Number(myHours)>=Number(start) && Number(myHours)<=Number(end)){
                                    //当前时间在预约时间段内                           
                                    if(startMui=="00"){
                                        this.selectTime = `${Number(end)}:30`;                         
                                        this.timeOrder = `${Number(end)}:30 - ${Number(end)+this.serviceTime}:30`
                                    }else{
                                        this.selectTime = `${Number(end)+1}:00`;                         
                                        this.timeOrder = `${Number(end)+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                    }                            
                                    this.newHours = (myDate.getHours() + 1) * 2                          
                                    break;
                                }else{                          
                                    this.selectTime = `${myDate.getHours()+1}:00`;                          
                                    let endTime = myDate.getHours() + 1 + this.serviceTime;
                                    if(endTime>24){
                                        endTime = endTime - 24
                                    }else if(endTime == 24){
                                            endTime = 0 
                                    } 

                                    if(myDate.getHours() + 1 == 24){
                                            this.newHours = 0
                                    }else{
                                            this.newHours = (myDate.getHours() + 1) * 2
                                    } 
                                    this.timeOrder = `${(myDate.getHours())+1}:00 - ${endTime}:00`                                                                           
                                }
                              
                            }                                                              
                        } 
                    }else{                  
                        this.selectTime = `${myDate.getHours()+1}:00`;
                        let endTime = myDate.getHours() + 1 + this.serviceTime ;
                        if(endTime>24){
                            endTime = endTime - 24
                        }else if(endTime == 24){
                                endTime = 0 
                        } 

                        if(myDate.getHours() + 1 == 24){
                                this.newHours = 0
                        }else{
                                this.newHours = (myDate.getHours() + 1) * 2
                        } 
                        this.timeOrder = `${(myDate.getHours())+1}:00 - ${endTime}:00`                    
                    }                     
                }                                                                                     
            }else if(myDate.getMinutes() <30){                                                           
                let myHours = `${myDate.getHours()}`;                
                let time1 = '30'
                if(this.orderDateIs){                 
                    //是当天
                    if( this.yuyueArr.length>0){                   
                        for(var i=0;i<this.yuyueArr.length;i++){
                            if(this.yuyueArr[i].day==myDay){
                                let start = this.yuyueArr[i].start.slice(0,2);
                                let end = this.yuyueArr[i].end.slice(0,2);
                                let startMui = this.yuyueArr[i].start.slice(3,5);
                                if( (Number(myHours)+1)==Number(start) && ( Number(time1)-Number(startMui)==30 ||Number(time1)-Number(startMui)==-30) ){                          
                                //时间段已不足1小时 
                                if(startMui=="00"){
                                    this.timeOrder = `${end}:30 - ${Number(end)+this.serviceTime}:30`
                                    this.selectTime = `${end}:30`;
                                }else{
                                    this.timeOrder = `${end+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                    this.selectTime = `${end+1}:00`;
                                }                                                     
                                this.newHours = (myDate.getHours() + 1) * 2 - 1                            
                                break;
                                }else if(Number(myHours)>=Number(start) && Number(myHours)<=Number(end) ){                            
                                    //当前时间在预约时间段内
                                    if(startMui=="00"){
                                        this.timeOrder = `${end}:30 - ${Number(end)+this.serviceTime}:30`
                                        this.selectTime = `${end}:30`;
                                    }else{
                                        this.timeOrder = `${end+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                        this.selectTime = `${end+1}:00`;
                                    }                                                      
                                    this.newHours = (myDate.getHours() + 1) * 2 - 1                                                      
                                    break; 
                                }else{                          
                                    //时间段超过1小时
                                    this.selectTime = `${myDate.getHours()}:30`;                           
                                    let endTime = myDate.getHours()+ this.serviceTime
                                    if(endTime > 24){
                                        endTime = endTime - 24
                                    }else if(endTime == 24){
                                        endTime = 0
                                    }
                                    this.newHours = (myDate.getHours() + 1) * 2 - 1                  
                                    this.timeOrder = `${(myDate.getHours())}:30 - ${endTime}:30`                                                                                 
                                }         
                            }                                                                                                                                                            
                        } 
                    }else{                    
                        this.selectTime = `${myDate.getHours()}:30`;
                        let endTime = myDate.getHours()+ this.serviceTime
                        if(endTime > 24){
                            endTime = endTime - 24
                        }else if(endTime == 24){
                            endTime = 0
                        }
                        this.newHours = (myDate.getHours() + 1) * 2 - 1                  
                        this.timeOrder = `${(myDate.getHours())}:30 - ${endTime}:30`                    
                    }
                }else{                  
                    //不是当天
                    if( this.yuyueArr.length>0){                                     
                        for(var i=0;i<this.yuyueArr.length;i++){
                            if(this.yuyueArr[i].day>myDay){                              
                                let start = this.yuyueArr[i].start.slice(0,2);
                                let end = this.yuyueArr[i].end.slice(0,2);
                                let startMui = this.yuyueArr[i].start.slice(3,5);
                                if( (Number(myHours)+1)==Number(start) && ( Number(time1)-Number(startMui)==30 ||Number(time1)-Number(startMui)==-30) ){                          
                                    //时间段已不足1小时 
                                    if(startMui=="00"){
                                        this.timeOrder = `${end}:30 - ${Number(end)+this.serviceTime}:30`
                                        this.selectTime = `${end}:30`;
                                    }else{
                                        this.timeOrder = `${end+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                        this.selectTime = `${end+1}:00`;
                                    }                                                     
                                    this.newHours = (myDate.getHours() + 1) * 2 - 1                            
                                    break;
                                }else if(Number(myHours)>=Number(start) && Number(myHours)<=Number(end) ){                            
                                    //当前时间在预约时间段内
                                    if(startMui=="00"){
                                        this.timeOrder = `${end}:30 - ${Number(end)+this.serviceTime}:30`
                                        this.selectTime = `${end}:30`;
                                    }else{
                                        this.timeOrder = `${end+1}:00 - ${(Number(end)+1)+this.serviceTime}:00`
                                        this.selectTime = `${end+1}:00`;
                                    }                                                      
                                    this.newHours = (myDate.getHours() + 1) * 2 - 1                                                      
                                    break; 
                                }else{                          
                                    //时间段超过1小时
                                    this.selectTime = `${myDate.getHours()}:30`;                           
                                    let endTime = myDate.getHours()+ this.serviceTime
                                    if(endTime > 24){
                                        endTime = endTime - 24
                                    }else if(endTime == 24){
                                        endTime = 0
                                    }
                                    this.newHours = (myDate.getHours() + 1) * 2 - 1                  
                                    this.timeOrder = `${(myDate.getHours())}:30 - ${endTime}:30`                                                                                 
                                } 
                               
                            }                                                                                                                                                            
                        } 
                    }else{                                    
                        this.selectTime = `${myDate.getHours()}:30`;
                        let endTime = myDate.getHours()+ this.serviceTime
                        if(endTime > 24){
                            endTime = endTime - 24
                        }else if(endTime == 24){
                            endTime = 0
                        }
                        this.newHours = (myDate.getHours() + 1) * 2 - 1                  
                        this.timeOrder = `${(myDate.getHours())}:30 - ${endTime}:30`                    
                    }
                }                
                                                      
            }else{
                 this.timeOrder = `${(myDate.getHours())}:${myDate.getMinutes()} - ${(myDate.getHours() + 1 + this.serviceTime)}:${myDate.getMinutes()}`
            }                                                                               
        },
        // 点击时间(选择时间)
        timeXz(index,item){ 
            this.serviceTime = 1                        
            let selectTime = this.selectTime.slice(0,2)
            this.selectTime = item.time;
            let time = item.time.slice(0,2)
            let time1 = item.time.slice(3,5)
            let endTime = ''
            let myDate = new Date();
            let myDay = myDate.getDate();            
            if(this.orderDateIs){                                
                //是当天日期
                if( this.yuyueArr.length>0){
                    for(var i=0;i<this.yuyueArr.length;i++){
                        if(this.yuyueArr[i].day==myDay){                         
                            if(item.time>=this.yuyueArr[i].start && item.time<=this.yuyueArr[i].end){                                
                                this.$Message.warning('您选择的时间有误！')
                                return false
                            }
                            let start = this.yuyueArr[i].start.slice(0,2);
                            let startMui = this.yuyueArr[i].start.slice(3,5);                           
                            if( (Number(time)+1)==Number(start) && ( Number(time1)-Number(startMui)==30 ||Number(time1)-Number(startMui)==-30) ){
                                //选择的时间段已不足1小时                               
                                this.isJia = false
                                this.$Message.warning('您选择的时间段已不足1小时！')                          
                                return false
                            }else if((Number(time)+this.serviceTime)==Number(start) && Number(time1)-Number(startMui)==0 || (Number(time)+this.serviceTime+1)==Number(start) && (Number(time1)-Number(startMui)==30||Number(time1)-Number(startMui)==-30)){

                                //选择的时间段刚好1小时
                                if(Number(time) + this.serviceTime>=24){
                                    endTime = Number(time) + this.serviceTime - 24
                                }else{
                                    endTime = Number(time) + this.serviceTime
                                }
                                this.timeOrder = `${item.time} - ${endTime}:${time1}`
                                this.isJia = false 
                                return false                         
                            }else{
                                this.isJia = true
                            }
                            break;
                        }                        
                        
                    } 
                }               
                if(this.newHours > index ){                   
                    this.$Message.warning('您选择的时间有误！')
                    return false
                }else{
                    
                }
            }else{                
                 //不是当天日期（预约日期）                             
                 if( this.yuyueArr.length>0){
                    for(var i=0;i<this.yuyueArr.length;i++){
                        if(this.yuyueArr[i].day>myDay){
                            let start = this.yuyueArr[i].start.slice(0,2);
                            let startMui = this.yuyueArr[i].start.slice(3,5);                            
                            if(item.time>=this.yuyueArr[i].start && item.time<=this.yuyueArr[i].end){                              
                                this.$Message.warning('您选择的时间有误！')
                                return false
                            }                                                 
                            if( (Number(time)+1)==Number(start) && ( Number(time1)-Number(startMui)==30 ||Number(time1)-Number(startMui)==-30) ){                               
                                //选择的时间段已不足1小时                                                          
                                this.isJia = false
                                this.$Message.warning('您选择的时间段已不足1小时！')                          
                                return false
                            }else if((Number(time)+1)==Number(start) && Number(time1)-Number(startMui)==0){                                                        
                                //选择的时间段刚好1小时
                                if(Number(time) + this.serviceTime>=24){
                                    endTime = Number(time) + this.serviceTime - 24
                                }else{
                                    endTime = Number(time) + this.serviceTime
                                }
                                this.timeOrder = `${item.time} - ${endTime}:${time1}` 
                                this.isJia = false
                                return false 
                            }else{                                
                                this.isJia = true                                                              
                            }
                             break;
                        }
                       
                    } 
                }               
            }            
            this.timesIsShow = !this.timesIsShow                                    
            if(Number(time) + this.serviceTime>=24){
                endTime = Number(time) + this.serviceTime - 24
            }else{
                endTime = Number(time) + this.serviceTime
                
            }
            if(endTime<10){
                endTime = "0"+endTime
            }
            this.timeOrder = `${item.time} - ${endTime}:${time1}`
            this.makeTimeVal = true                  
        },
        // 减时间
        jian(){
            if(this.serviceTime > 1 ){
                this.serviceTime--
                if(this.makeTimeVal){
                    let endTime2 = this.timeOrder.slice(3,5)
                    let startTime1 = this.timeOrder.slice(0,5)
                    let startTime2 = this.timeOrder.slice(0,2)
                    let endTime = ''
                    if(Number(startTime2) + this.serviceTime>=24){
                        endTime = Number(startTime2) + this.serviceTime - 24
                    }else{
                        endTime = Number(startTime2) + this.serviceTime
                    }
                    this.timeOrder = `${startTime1} - ${endTime}:${endTime2}`
                }else{
                    this.time()
                }
            }
        },
        // 家时间
        jia(){                                
            if(this.isJia==false){
                this.$Message.warning('您选择的时间已被预约无法再加时间了！')  
                return
            }            
            let myDay = this.orderDate.getDate();                                  
            if(this.serviceTime<23){                             
                if( this.yuyueArr.length>0){
                    let endTime2 = this.timeOrder.slice(3,5)
                    let startTime1 = this.timeOrder.slice(0,5)
                    let startTime2 = this.timeOrder.slice(0,2)                   
                    let myHours = Number(this.timeOrder.slice(7,10));                                                                                          
                    for(var i=0;i<this.yuyueArr.length;i++){                       
                        let start = this.yuyueArr[i].start.slice(0,2);
                        let end = this.yuyueArr[i].end.slice(0,2);
                        let startMui = this.yuyueArr[i].start.slice(3,5);
                        if(this.yuyueArr[i].day==myDay){                                                             
                                let start = this.yuyueArr[i].start.slice(0,2);
                                let end = this.yuyueArr[i].end.slice(0,2);
                                let startMui = this.yuyueArr[i].start.slice(3,5);                                                                                                                                    
                                if( Number(myHours)==Number(start) && ( Number(endTime2)-Number(startMui)==30 ||Number(endTime2)-Number(startMui)==-30) ){
                                    //服务时间段的结束时间距离预约时间的开始时间已不足1小时                                                           
                                    this.isJia = false
                                    this.$Message.warning('距离预约时间已不足1小时！')                          
                                return                            
                                }else if( Number(myHours)==Number(start) && ( Number(endTime2)-Number(startMui)==0) ||  Number(myHours)+1==Number(start) && ( Number(endTime2)-Number(startMui)==30 || Number(endTime2)-Number(startMui)==-30) ){
                                    //服务时间段的结束时间距离预约时间的开始时间刚好1小时                                
                                    this.isJia = false
                                    this.$Message.warning('您选择的时间距离预约时间只有1小时！')                          
                                return                                                           
                                }else{
                                    //服务时间段的结束时间距离预约时间的开始时间超过1小时                                                                
                                    this.serviceTime++ 
                                    if(this.makeTimeVal){
                                        let endTime2 = this.timeOrder.slice(3,5)
                                        let startTime1 = this.timeOrder.slice(0,5)
                                        let startTime2 = this.timeOrder.slice(0,2)
                                        let endTime = ''
                                        if(Number(startTime2) + this.serviceTime>=24){
                                            endTime = Number(startTime2) + this.serviceTime - 24
                                        }else{
                                            endTime = Number(startTime2) + this.serviceTime
                                        }                   
                                        this.timeOrder = `${startTime1} - ${endTime}:${endTime2}`                                               
                                    }else{
                                        this.time()
                                    }                              
                                    return;
                                }
                                break;     
                          } 
                          if(this.yuyueArr[i].day>myDay){                                                             
                                let start = this.yuyueArr[i].start.slice(0,2);
                                let end = this.yuyueArr[i].end.slice(0,2);
                                let startMui = this.yuyueArr[i].start.slice(3,5);                              
                              if( Number(myHours)==Number(start) && ( Number(endTime2)-Number(startMui)==30 ||Number(endTime2)-Number(startMui)==-30) ){
                                    //服务时间段的结束时间距离预约时间的开始时间已不足1小时                                                           
                                    this.isJia = false
                                    this.$Message.warning('距离预约时间已不足1小时！')                          
                                return                            
                                }else if( Number(myHours)==Number(start) && ( Number(endTime2)-Number(startMui)==0) ||  Number(myHours)+1==Number(start) && ( Number(endTime2)-Number(startMui)==30 || Number(endTime2)-Number(startMui)==-30) ){
                                    //服务时间段的结束时间距离预约时间的开始时间刚好1小时                                
                                    this.isJia = false
                                    this.$Message.warning('您选择的时间距离预约时间只有1小时！')                          
                                return                                                           
                                }else{
                                    //服务时间段的结束时间距离预约时间的开始时间超过1小时                                                                 
                                    this.serviceTime++ 
                                    if(this.makeTimeVal){
                                        let endTime2 = this.timeOrder.slice(3,5)
                                        let startTime1 = this.timeOrder.slice(0,5)
                                        let startTime2 = this.timeOrder.slice(0,2)
                                        let endTime = ''
                                        if(Number(startTime2) + this.serviceTime>=24){
                                            endTime = Number(startTime2) + this.serviceTime - 24
                                        }else{
                                            endTime = Number(startTime2) + this.serviceTime
                                        }                   
                                        this.timeOrder = `${startTime1} - ${endTime}:${endTime2}`                                               
                                    }else{
                                        this.time()
                                    }                              
                                    return;
                                } 
                                break    
                          }  
                                                                                                                                                                                                                
                    } 
                    
                }else{
                    //没有预约                   
                    this.serviceTime++
                    if(this.makeTimeVal){
                        let endTime2 = this.timeOrder.slice(3,5)
                        let startTime1 = this.timeOrder.slice(0,5)
                        let startTime2 = this.timeOrder.slice(0,2)
                        let endTime = ''
                        if(Number(startTime2) + this.serviceTime>=24){
                            endTime = Number(startTime2) + this.serviceTime - 24
                        }else{
                            endTime = Number(startTime2) + this.serviceTime
                        }                   
                        this.timeOrder = `${startTime1} - ${endTime}:${endTime2}`                 
                    }else{
                        this.time()
                    }
                   
                }
                
            }else if(this.serviceTime<=23){
                this.serviceTime = 23
                if(this.makeTimeVal){
                    
                }else{
                    this.time()
                }
            }
        },
        // 预约时间
        makeTime(){         
            let params = {
                sellerId:this.userId
            }
            let yuyueTime = [];
            apiHttp.apiDetail.busyTimes(params,resp=>{
                if(resp.code==200){                                                        
                    if( resp.data.length>0){                    
                        for(var i=0;i<resp.data.length;i++){
                            let start = new Date(resp.data[i].start);                          
                            resp.data[i].start =  this.$str(this.$time(resp.data[i].start),11,5);
                            resp.data[i].end =  this.$str(this.$time(resp.data[i].end),11,5);
                            //resp.data[i].year = start.getFullYear();
                            resp.data[i].day =  start.getDate();                                                     
                            yuyueTime.push(resp.data[i]);
                        }
                        this.yuyueArr = yuyueTime;                                                                                                           
                    }               
                    this.time()
                }                                                                                                
            })
        },
        // 优惠券列表
        couponsList(){
            let params = {
                price:this.serviceTime*this.price
            }
            apiHttp.apiDetail.usableList(params,resp=>{
                if(resp.code == 200){
                    this.coupons = resp.data
                }
            })
        },
        // 支付选择
        zfType(index){
            if(index == 0 && this.zhifuType == -1){
                this.zhifuType = 0
            }else if(index == 1 && this.zhifuType == -1){
                this.zhifuType = 1
            }else if(index == 0 && this.zhifuType == 0){
                this.zhifuType = -1
            }else if(index == 1 && this.zhifuType == 0){
                this.zhifuType = 1
            }else if(index == 1 && this.zhifuType == 1){
                this.zhifuType = -1
            }else if(index == 0 && this.zhifuType == 1){
                this.zhifuType = 0
            }
        },
        // 立即下单
        servicePay(){
            let d = new Date(this.orderDate)
            let time = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() + ' ' + this.timeOrder.slice(0,5) + ':00'
            let payType = ''
            let params = {}
            if(this.totalPrice > 0 && this.zhifuType == -1){
                this.$Message.warning('余额不足请选择支付方式')
                return
            }
            if(this.zhifuType == -1){
                payType = ''
                params={
                    remark:this.remark,   //留言内容
                    userId:this.userId,   //用户id
                    serviceAuthId:this.serverAuthId,   //服务id
                    useStartTime:time,
                    count:this.serviceTime,
                    couponId:this.coupons.length > 0 ? this.coupons[0].coupon.id : '',     //优惠券id
                    source:3,       //1APP 2微信
                    payType:payType,        //  订单支付类型
                    autoCost:this.isYe
                }
            }else if(this.zhifuType == 0){
                payType = 11
                params={
                    remark:this.remark,   //留言内容
                    userId:this.userId,   //用户id
                    serviceAuthId:this.serverAuthId,   //服务id
                    useStartTime:time,
                    count:this.serviceTime,
                    couponId:this.coupons.length > 0 ? this.coupons[0].coupon.id : '',     //优惠券id
                    source:3,       //1APP 2微信
                    payType:payType,        //  订单支付类型
                    autoCost:this.isYe,
                    returnUrl:`${this.returnUrl}center?leftIndex=0`
                }
            }else{
                payType = 4
                params={
                    remark:this.remark,   //留言内容
                    userId:this.userId,   //用户id
                    serviceAuthId:this.serverAuthId,   //服务id
                    useStartTime:time,
                    count:this.serviceTime,
                    couponId:this.coupons.length > 0 ? this.coupons[0].coupon.id : '',     //优惠券id
                    source:3,       //1APP 2微信
                    payType:payType,        //  订单支付类型
                    autoCost:this.isYe
                }
            }
            apiHttp.apiDetail.servicePay(params,resp=>{
                if(resp.code == '200') {
                    if(payType == 11){
                        if(resp.data != null){
                            this.formZFB = resp.data
                            const div = document.createElement('div')
                            div.innerHTML = this.formZFB
                            document.body.appendChild(div)
                            document.forms[0].submit()
                        }else{
                            this.$Message.success('支付成功')
                            this.$router.push({
                                name:'center',
                                query:{
                                    leftIndex: 0
                                }
                            })
                        }
                    }else if(payType == 4){
                        if(resp.data != null){
                            this.qrcode(resp.data)
                        }else{
                            this.$Message.success('支付成功')
                            this.$router.push({
                                name:'center',
                                query:{
                                    leftIndex: 0
                                }
                            })
                        }
                    }else{
                        this.$Message.success('支付成功')
                        this.$router.push({
                            name:'center',
                            query:{
                                leftIndex: 0
                            }
                        })
                    }
                }else{
                    this.$Message.warning(resp.message)
                }
            })
        },
        // 微信支付生成二维码
        qrcode(data) {
            let self = this
            let opts = {
                errorCorrectionLevel: 'H',
                type: 'image/jpeg',
                rendererOpts: {
                    quality: 0.3
                }
            }
            QRCode.toCanvas(this.$refs.canvas,data.url, opts,(err, url)=> {
                if (err){
                    console.log(err)
                }
            })
            this.wxZfSuccess = setInterval(()=>{
                self.orderVerify(data.orderId)
            },3000)
            this.ewmBox = true
        },
        // 判断微信支付是否成功
        orderVerify(id){
            apiHttp.apiCenter.orderVerify(id,'',resp=>{
                if(resp.data == true){
                    clearInterval(this.wxZfSuccess)
                    this.ewmBox = false
                    this.$Message.success('微信支付成功')
                }
            })
        },
        //验证留言内容
        checkContent(){
            this.count = this.remark.length;
            if(this.count>200){
                this.remark = this.$str(this.remark,0,200);
            }
        }
    }    
}
</script>
<style scoped>
.placeOrder-back{
    background-color: #f9f9f9;
}
.ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner {
    background-color: #D84E4D;
    border-color: #D84E4D;
}
.ivu-steps-item.ivu-steps-status-process .ivu-steps-content{
    color: #D84E4D;
    font-size: 14px;
}
.myClear{
    clear: both;
}
.placeOrder{
    width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #fff;
}
.placeOrder .top-title{
    padding: 10px 30px;
}
.placeOrder .top-title h2{
    float: left;
    margin-top: 10px;
    font-size: 20px;
    font-weight: 400;
    color: #333;
}
.placeOrder .top-title .steps{
    width: 50%;
    float: right;
}
.ivu-steps-horizontal .ivu-steps-content{
    padding-left: 0px;
    font-size: 14px;
    width: 130px;
}
.placeOrder .step1{
    padding: 30px 30px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}
.info{
    height: 80px;
}
.info img{
    height: 80px;
    width: 80px;
    border-radius:50%;
}
.step1 .userinfo>p{
    margin-bottom: 10px;
    font-size: 16px;
    color: #666;
}
.step1 .userinfo{
    float: left;
    width: 360px;
    height: 180px;
    background-color: #F9F9F9;
    box-sizing: border-box;
    padding: 30px 60px;
}
.step1 .info-mar{
    margin-right: 30px;
}
.step1 .userinfo .info>img{
    float: left;
    margin-right: 20px;
}
.step1 .userinfo .info>div{
    float: left;
}
.step1 .userinfo .info>div{
    padding-top: 5px;
}
.step1 .userinfo .info .info-p1{
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
}
.step1 .userinfo .info .info-p2{
    font-size: 16px;
    color: #666;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    padding: 2px 6px;
    height: 30px;
    display: inline-block;
    line-height: 26px;

}
.step1 .userinfo .info .info-p{
    margin-top: 15px;
}
.step1 .userinfo .info .service-p{
    font-size: 20px;
    color: #333;
}
.step1 .userinfo .info .info-p>span:nth-child(1){
    font-size: 14px;
    color: #D84E4D;
    font-weight: 600;
}
.step1 .userinfo .info .info-p>span:nth-child(2){
    font-size: 24px;
    font-weight: 600;
    color: #D84E4D;
}
.step1 .userinfo .info .info-p>span:nth-child(3){
    font-size: 14px;
    color: #666;
}
.placeOrder .step2{
    padding: 30px 30px;
    position: relative;
    height: 40px;
}
.placeOrder .step2 .times{
    position: absolute;
    left: 360px;
    width: 610px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding: 10px;
    top: 75px;
    z-index: 99;
}
.placeOrder .step2 .times ul{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.placeOrder .step2 .times li{
    margin: 11px 18px;
    padding: 2px 5px;
    cursor: pointer;
}
.placeOrder .step2 .times .activeNone{
    color: #ccc
}
.placeOrder .step2 .times .active{
    background: #d84e4d;
    color: #fff;
    border-radius: 5px;
}
.placeOrder .step2 span:nth-child(1){
    font-size: 18px;
    margin-right: 20px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    float: left;
}
.placeOrder .step2 span:nth-child(2){
    font-size: 16px;
    margin-right: 10px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    float: left;
}
.placeOrder .step2 span:nth-child(4){
    font-size: 16px;
    margin-left: 50px;
    margin-right: 10px;
    height: 40px;
    display: inline-block;
    line-height: 40px;
    float: left;
}
.placeOrder .step2 input{        
    border: 1px solid #eeeeee;
    border-radius: 10px;
    padding-left: 10px;
}
.placeOrder .step2 .orderDate{
    float: left;
}
.placeOrder .step2 .orderTime{
    width: 180px;
    height: 40px;
    font-size: 14px;
    float: left;
    position: relative;
}
.placeOrder .step2 em{
    margin-left: 50px;
    height: 40px;
    display: inline-block;
    float: left;
}
.placeOrder .step2 em input{
    border-left: none;
    border-right: none;
    border-radius: 0;
}
.placeOrder .step2 .num-btn{
    font-size: 18px;
    width: 30px;
    height: 38px;
    border: 1px solid #eeeeee;
    background-color: #ffffff;
    border-radius: 10px 0 0 10px;
    float: left;
}
.placeOrder .step2 .jia{
    border-radius: 0 10px 10px 0;
}
.placeOrder .step2 .orderCount{
    text-align: center;
    font-size: 16px;
    width: 150px;
    height: 38px;
    float: left;
}
.placeOrder .step3{
    padding: 0px 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eeeeee;
}
.placeOrder .step3 .content1>p{
    float: left;
    margin-right: 10px;
    font-size: 16px;
}
.placeOrder .step3 .content1 .content{
    float: left;
    width: 1080px;
    height: 200px;
    border-radius: 10px;
    position: relative;
}
.placeOrder .step3 .content1 .content textarea{
    border:#eee solid 1px;
    background-color: #F9F9F9;
    width: 1038px;
    padding: 20px;
    height: 160px;
}
.placeOrder .step3 .content1 .content span{
    position: absolute;
    right: 5px;
    bottom: 0;
    color: #666;
    font-size: 14px;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    font-size: 18px;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   font-size: 18px;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   font-size: 18px;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   font-size: 18px;
}
.placeOrder .step3 .content2{
    padding: 20px 0px;
}
.placeOrder .step3 .content2 .label-span{
    margin-right: 10px;    
    font-size: 16px;   
}
.placeOrder .step3 .content2 .label-span1{
    background: url('../../assets/img/detail/shouji.png') no-repeat 5px;
    padding-left: 25px;
    height: 40px;
    display: inline-block;
    float: left;
    line-height: 40px;
}
.placeOrder .step3 .content2 .QQ-span{
    background: url('../../assets/img/management/s-qq.png') no-repeat;
    background-size: 40%;
    background-position: 0px 0px; 
    padding-left: 30px; 
    padding-top: 2px;
    padding-bottom: 5px;     
}
.placeOrder .step3 .content2 .wx-span{
    margin-left: 20px;
        background: url('../../assets/img/management/s-wx.png') no-repeat;
    background-size: 40%;
    background-position: 0px 0px; 
    padding-left: 30px; 
    padding-top: 2px;
    padding-bottom: 5px;     
}
.placeOrder .step3 .content2 input{
    padding-left: 10px;
    width: 170px;
    height: 40px;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    font-size: 14px;
}
/* 优惠券抵用 */
.placeOrder .step4{
    padding: 30px 30px;
}
.step4>p{
    float: left;
    margin-right: 10px;
    font-size: 16px;
}
.step4 .coupons{
    float: left;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 10px;
    color: #FFFFFF;
}
.coupons>li{
    margin-right: 10px;
    margin-bottom: 20px;
    width: 340px;
    height: 165px;
    background: url("../../assets/img/left-menu/coupon-bg.png") no-repeat;
    /*灰色背景图-已使用*/
    /* background-position: 0px -165px; */
    padding: 20px 10px;
}
.coupons .coupon-left{
    float: left;
    padding-top: 15px;
    padding-left: 20px;
}
.coupons .coupon-left>p:nth-child(1){
    font-size: 28px;
}
.coupons .coupon-left>p:nth-child(2){
    font-size: 16px;
    margin-bottom: 15px;
}
.coupons .coupon-left>p:nth-child(3){
    font-size: 8px;
}
.coupons .coupon-right{
    float: right;
    font-size: 6px;
    padding-top: 40px;
    padding-right: 15px;
    text-align: center;
}
.coupons .coupon-right>p:nth-child(2){
    margin-top: 20px;
}
/*  支付方式 */
.placeOrder .step5{
    margin-top: 20px;
    padding: 0px 30px;
}
.step5 .way1>p{
    float: left;
    margin-right: 20px;
    font-size: 16px;
}
.step5 .way1 .ways{
    float: left;
}
.step5 .way1 .ways .ways-one>img{
    margin-top: 10px;
}
.step5 .way1 .ways .ways-one{
    display: block;
    float: left;
    width: 230px;
    height: 60px;
    border: 1px solid #eee;
    border-radius: 10px;
    background-position: 50px 10px;
    margin-right: 30px;
    text-align:center;
}
.step5 .way1 .ways .active{
    border: 1px solid #D84E4D !important;
    background: url('../../assets/img/pay/Pick-on.png') no-repeat bottom right;
}
.step5 .way1 .ways .ways-tow{
    display: block;
    float: left;
    width: 230px;
    height: 60px;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    text-align: center;
}
.step5 .way1 .ways .ways-tow img{
    margin-top: 10px;
}
.placeOrder .step5 .way1 .yue{
    margin-top: 20px;
    font-size: 14px;
}
.placeOrder .step5 .way1 .yue>img{
    margin-right: 10PX;
    position: relative;
    top: 6px;
}
.placeOrder .step5 .way1 .yue span:nth-child(2){
    margin-right: 10PX;
}
.placeOrder .step5 .way1 .yue span:nth-child(3){
    color: #D84E4D;
    margin-right: 20PX;
}
.placeOrder .step5 .way1 .yue span:nth-child(4){
    color: #ffffff;
    background-color: #d84e4d;
    padding: 4px 12px;
    border-radius: 30px;
}
.step5 .way2{
    margin-top: 20px;
    background-color: #f9f9f9;
    padding: 40px 30px;
    text-align: right;
    font-size: 14px;
}
.step5 .way2 .way2-money {
    margin-bottom: 30px;
    color: #666;
}
#shifu{
    margin-bottom: 20px;
}
#shifu>span:nth-child(1){
    margin-right: 40px;
}
#shifu>span:nth-child(2){
    color: #D84E4D;
    font-size: 26px;
    font-weight: 600;
}
.step5 .way2 .zf-btn{
    margin-bottom: 20px;
    text-align: center;
    line-height: 58px;
    font-size: 16px;
}
.step5 .way2 .zf-btn>p{
    float:right;
    width: 230px;
    height: 58px;
    background-color: #d84e4d;
    color: #ffffff;
    border-radius: 10px;
}
.step5 .way2 .way2-money .way2-money-label{
    margin-right: 100px;
}
.step5 .way2>p{
    color: #999;
}
</style>

